<template>
<!--  <el-dialog :title="title" :visible.sync="opens" width="1000px" append-to-body>-->
    <el-calendar >
      <template slot="dateCell" slot-scope="{date,data}">
        <!--自定义内容
  1、先判断时间，进行颜色改变
  2、渲染先做好初始化格式，再循环渲染需要值班日期参数判断渲染
  3、点击事件区分两个（必须禁止冒泡）：未值班点击事件，已有直班点击事件；
  -->
        <div :style="{color: time-86400000 > new Date(date).getTime() ? '#ccc':''}" >
          <div class="calendar-day" slot="reference">
            {{ data.day.split('-').slice(2).join('-') }}
            <span  v-if="data.day === Time" style="float: right">值班</span>
            <div v-for="(item,index) in attendanceDetailsData" :key="index" slot="reference">
              <div v-if="data.day.split('-').slice(1).join('-') == item.day" style="height: 59px;margin-top: -23px;padding: 23px 0 0 6px;font-size: 12px;text-align: center;">
                <p >{{data.day.split('-').slice(1).join('-') == item.day ? item.cpname : ''}} </p>
                <p >{{data.day.split('-').slice(1).join('-') == item.day ? item.time : ''}} </p>

              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
<!--  </el-dialog>-->
</template>

<script>
  import { listOrdertime, getOrdertime, delOrdertime, addOrdertime, updateOrdertime } from "@/api/lhb/ordertime";

  export default {
    name: "Ordertime",
    data() {
      return {
        attendanceDetailsData:[],//排班列表
        time:Date.now(),
        value: new Date(),
        Time:this.TimeDate(),
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 排班表格数据
        ordertimeList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          bid: null,
          cpid: null,
          date: null,
          time: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询排班列表 */
      getList() {
        this.loading = true;
        listOrdertime(this.queryParams).then(response => {
          this.attendanceDetailsData = response.rows;
          console.log(this.attendanceDetailsData);
          this.attendanceDetailsData.forEach(item=>{
            item.day = "0" + item.date
            // item.day = item.date.split("-")[1]
          })
          console.log(this.attendanceDetailsData);
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

      TimeDate() {
        let time = new Date();
        var year = time.getFullYear(); //得到年份
        var month = time.getMonth() + 1; //得到月份
        var date = time.getDate(); //得到日期
        month = month < 10 ? "0" + month : month;
        date = date < 10 ? "0" + date : date;
        return year + "-" + month + "-" + date;
      },
      // 表单重置
      reset() {
        this.form = {
          otid: null,
          bid: null,
          cpid: null,
          date: null,
          time: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.otid)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加排班";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const otid = row.otid || this.ids
        getOrdertime(otid).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改排班";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.otid != null) {
              updateOrdertime(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addOrdertime(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const otids = row.otid || this.ids;
        this.$modal.confirm('是否确认删除排班编号为"' + otids + '"的数据项？').then(function() {
          return delOrdertime(otids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('lhb/ordertime/export', {
          ...this.queryParams
        }, `ordertime_${new Date().getTime()}.xlsx`)
      },
      //监听（上个月--今天--下个月）
      created() {
        this.$nextTick(() => {
          // 点击上一个月
          let prevBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(1)"
          );
          prevBtn.addEventListener("click", e => {
            this.visible=false;
          });

          //点击下一个月
          let nextBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(3)"
          );
          nextBtn.addEventListener("click", () => {
            this.visible=false;
          });

          //点击今天
          let todayBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(2)"
          );
          todayBtn.addEventListener("click", () => {
            this.visible=false;
          });
        });
      },
    }
  };
</script>
